<style scoped>
    .article-product {
        width: 100%;
        margin: 0 auto;
        padding: 15px 0px;
    }

    .article-product img {
        width: 100%;
    }

    .article-product-info {
        padding: 10px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .article-product-info-left {
        display: inline-block;
        margin-left: 2%;
        padding-left: 2%;
        font-size: 18px;
        color: red;
        font-weight: bold;
        border-left: 3px solid #9E9E9E;
    }

    .article-product-info-right {
        display: inline-block;
        padding-right: 4%;
    }

</style>

<template>
  <div class="article-product">
    <a v-link="{path: '/product/' + product.id }">
        <img :src="product.src" />
    </a>
    <div class="article-product-info">
        <span class="article-product-info-left">￥{{product.price}}</span>
        <span class="article-product-info-right">
            <x-button type='primary' v-link="{path: '/product/' + product.id, query: {sku: true}}" plain text="加入购物车" mini>
            </x-button>
        </span>
    </div>

  </div>
</template>

<script>

import XButton from 'vux-components/X-button'

export default {
    props: ['value'],
    computed: {
        product: ({value}) => JSON.parse(value),
    },
    components: {
        XButton
    },
    methods: {
        shopping_cart () {
            alert('开发中....');
        }
    }
}

</script>
